<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="divport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../lib/index.min.css">
  <title>Document</title>
</head>
<body>
  <h1>DOCK UI</h1>
  
  <div class="text-xsl">汉字展示 Text-xsl</div>
  <div class="text-sl">汉字展示 Text-sl</div>
  <div class="text-xxl">汉字展示 Text-xxl</div>
  <div class="text-xl">汉字展示 Text-xl</div>
  <div class="text-lg">汉字展示 Text-lg</div>
  <div class="text-df">汉字展示 Text-df</div>
  <div class="text-sm">汉字展示 Text-sm</div>
  <div class="text-xs">汉字展示 Text-xs</div>

  <!-- 布局 -->
  <div class="padding">
    
    <div class="flex flex-wrap">
      <div class="bg-gray padding basis-xs">xs(20%)</div>
      <div class="basis-df"></div>
      <div class="bg-gray padding basis-sm">sm(40%)</div>
      <div class="basis-df"></div>
      <div class="bg-gray padding basis-df">sub(50%)</div>
      <div class="bg-gray padding basis-lg">lg(60%)</div>
      <div class="bg-gray  padding basis-xl">xl(80%)</div>
  </div>
  <div class="padding">
    <h3>比例</h3>
    <div class="flex">
      <div class="bg-gray flex-sub padding margin-xs">1</div>
      <div class="bg-gray flex-sub padding margin-xs">1</div>
    </div>
    <div class="flex">
        <div class="bg-gray flex-sub padding margin-xs">1</div>
        <div class="bg-gray flex-twice padding margin-xs">2</div>
    </div>
    <div class="flex">
        <div class="bg-gray flex-sub padding margin-xs">1</div>
        <div class="bg-gray flex-twice padding margin-xs">2</div>
        <div class="bg-gray flex-treble padding margin-xs">3</div>
    </div>
  </div>

  </div>

  <div class="padding">
    <h3>对齐</h3>
    <div class="flex justify-start">
        <div class="bg-gray padding">start</div>
        <div class="bg-gray padding">start</div>
    </div>
    <div class="flex justify-end">
        <div class="bg-gray padding">end</div>
        <div class="bg-gray padding">end</div>
    </div>
    <div class="flex justify-center">
        <div class="bg-gray padding">center</div>
        <div class="bg-gray padding">center</div>
    </div>
    <div class="flex justify-between">
        <div class="bg-gray padding">between</div>
        <div class="bg-gray padding">between</div>
    </div>
    <div class="flex justify-around">
        <div class="bg-gray margin">around</div>
        <div class="bg-gray margin">around</div>
    </div>
  </div>

  <div class="padding">
    <div class="flex align-start">
      <div class="bg-gray padding-xl">DOCK Ui</div>
      <div class="bg-gray padding">start</div>
  </div>
  <div class="flex align-end margin-top">
      <div class="bg-gray padding-xl">DOCK Ui</div>
      <div class="bg-gray padding">end</div>
  </div>
  <div class="flex align-center margin-top">
      <div class="bg-gray padding-xl">DOCK Ui</div>
      <div class="bg-gray padding">center</div>
  </div>
  </div>

  <div class="bg-blue padding-xs">
      <div class="bg-cyan radius padding">padding-xs</div>
  </div>
  <div class="bg-blue padding-sm">
      <div class="bg-cyan radius padding">padding-sm</div>
  </div>
  <div class="bg-blue padding">
      <div class="bg-cyan radius padding">padding</div>
  </div>
  <div class="bg-blue padding-lg">
      <div class="bg-cyan radius padding">padding-lg</div>
  </div>
  <div class="bg-blue padding-xl">
      <div class="bg-cyan radius padding">padding-xl</div>
  </div>
</body>
</html>